<template>
  <div>
    <!-- 列配置 -->
    <a-tooltip>
      <template #title>{{ l('Personalized.ListConfiguration') }}</template>
      <a-button type="text" @click="handleToobarBtnClick('ListConfig')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#gctliebiaosheji"></use>
        </svg>
      </a-button>
    </a-tooltip>
    <template v-if="showSelect">
      <a-divider type="vertical" />
      <!-- 搜索配置 -->
      <a-tooltip>
        <template #title>{{ l('Personalized.QueryConditionConfiguration') }}</template>
        <a-button type="text" @click="handleToobarBtnClick('QueryConfig')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#gctchaxuntiaojianpeizhi"></use>
          </svg>
        </a-button>
      </a-tooltip>
    </template>
    <a-divider type="vertical" />
    <!-- 列颜色配置 -->
    <a-tooltip>
      <template #title>{{ l('Personalized.ColumnColorConfiguration') }}</template>
      <a-button type="text" @click="handleToobarBtnClick('ColumnColorConfig')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#gctlieyansepeizhi"></use>
        </svg>
      </a-button>
    </a-tooltip>
    <!-- 导出 -->
    <template v-if="showExport">
      <a-divider type="vertical" />
      <a-tooltip>
        <template #title>{{ l('Personalized.ExportCurrentPage') }}</template>
        <a-button type="text" @click="handleToobarBtnClick('Export')">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#gctdaochudangqianye"></use>
          </svg>
        </a-button>
      </a-tooltip>
    </template>
    <!-- 批量导出 -->
    <template v-if="showExport">
      <a-divider type="vertical" />
      <a-tooltip>
        <template #title>{{ l('Personalized.ExportAllPages') }}</template>
        <span @click="handleToobarBtnClick('BulkExport')">
          <a-button type="text">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#gctdaochusuoyoushuju"></use>
            </svg>
          </a-button>
        </span>
      </a-tooltip>
    </template>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import SampleComponentBase from '/@/shared/component-base/sample-component-base';
  export default defineComponent({
    name: 'g-dynamic-table-toolbar-bottom',
    mixins: [SampleComponentBase],
    emits: ['action-click'],
    props: {
      json: {
        type: Object,
        required: true,
        default: {},
      },
      showExport: {
        type: Boolean,
        required: true,
      },
      showSelect: {
        type: Boolean,
        default: true,
        required: true,
      },
    },
    methods: {
      /**
       * toolbar 按钮点击事件
       */
      handleToobarBtnClick(type: string) {
        this.$emit('action-click', type, null);
      },
    },
  });
</script>
<style lang="less" scoped>
  .ant-btn-text {
    padding: 0 4px;
    margin: 0;
    background: transparent;
    border-width: 0;
  }
</style>
